import { useEffect, useState } from "react";
import Taro from '@tarojs/taro';
import { render } from "react-dom";
import { connect } from "react-redux";
import {useDidShow} from '@tarojs/taro'
import NavBar from '../../component/navbar/index'
import Styles from './index.module.less'
import TreatmentSelector from '../../component/treatmentSelector'
import Profile from '../../component/profile'
import StoreSelector from '../../component/storeSelector'
import DateSelector from '../../component/dateSelector'
import TimeSelector from '../../component/timeSelector'
import Remark from '../../component/remark'
import {getGlobalData, Request,combineDate} from '../../util'

function index (props) {

    let domain = getGlobalData('domain');

    let navBarHeight = Taro.getStorageSync("navBarHeight") !== '' ? Taro.getStorageSync("navBarHeight") :  87;

    const [isTrueCode,setIsTrueCode] = useState(false);

    useDidShow(()=>{
        props.sendTabBarID();
    })



    //校验表单
    const handleSubmitBtn = function () {
        if(!Taro.getStorageSync('selectedTreatment')){  //校验所选疗程是否为空
            Taro.showModal({
                content:"请选择疗程",
                showCancel:false,
            })
        }else if(!Taro.getStorageSync('trueName')){ //校验真实姓名是否填写
            Taro.showModal({
                content:"请填写您的真实姓名",
                showCancel:false,
            })
        }else if(!Taro.getStorageSync('phone')){  //校验手机号码是否填写
            Taro.showModal({
                content:"请填写您的联系电话",
                showCancel:false,
            })
        }else if(!Taro.getStorageSync('selectedTime')){ //校验预约时间是否填写
            Taro.showModal({
                content:"请选择时间",
                showCancel:false,
            })
        }else if(!Taro.getStorageSync('authCode')){ //校验验证码是否填写
            Taro.showModal({
                content:"请填写验证码",
                showCancel:false,
            })
        }else{ //校验手机号码是否真实
            Request(domain+"/client/auth/checkCode",{phone:Taro.getStorageSync('phone'), code:Taro.getStorageSync('authCode')}).then((res)=>{
                let isTrue = res.data.data;
                if(isTrue){
                    let date = combineDate(Taro.getStorageSync('selectedYear'),Taro.getStorageSync('selectedMonth'),Taro.getStorageSync('selectedDay'));
                    Request(domain+"/client/appointment/saveAppointment",{
                        date:date,
                        time:Taro.getStorageSync("selectedTime"),
                        treatment:Taro.getStorageSync("selectedTreatment"),
                        store:Taro.getStorageSync("selectedStore"),
                        openid:Taro.getStorageSync("openid"),
                        remark: Taro.getStorageSync("remark")
                    }).then((res)=>{
                        if(res.data.code == 200){
                            Taro.removeStorageSync("selectedTime");
                            Taro.removeStorageSync("remark");
                            Taro.removeStorageSync("authCode");
                            Taro.showModal({
                                content:"预约成功",
                                showCancel:false,
                                success:function(e){
                                    if(e.confirm){
                                        Taro.navigateTo({
                                            url:"/pages/confirm/index"
                                        })
                                    }
                                }
                            })
                        }
                        
                    })
                }else{
                    Taro.showModal({
                        content:"验证码不正确",
                        showCancel:false,
                    })
                  
                }
                
            });
        }
    }


    return (
        <view>
            <NavBar title="预约疗程" />
            <TreatmentSelector style={{marginTop: (navBarHeight+5)+"px"}} />
            <Profile style={{marginTop: "10px"}}/>
            <StoreSelector />
            <DateSelector style={{marginTop: "20px"}} maxNextMonth="12"/>
            <TimeSelector />
            <Remark/>
            <view class={Styles.submit_btn_wrap} >
                <view class={Styles.submit_btn} onClick={handleSubmitBtn}>立即体验</view>
            </view>
        </view>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendTabBarID:()=>{
            dispatch({
                type:"BOOK"
            })
        }
    }
}

export default connect(null, mapDispatchToProps)(index);
